<template>
  <div class="messageitem">
    <div class="messageitem_content" v-if="messageType === 1">
      <div class="messageitem_item">
        <ItemImgHead :item="items"></ItemImgHead>
      </div>
      <div class="messageitem_item">
        <slot name="message"></slot>
      </div>
      <div class="messageitem_item">
        <slot name="handle"></slot>
      </div>
    </div>
    <div
      class="messageitem_content"
      v-if="messageType === 2"
      :class="messageType === 2 ? 'on' : ''"
    >
      <div class="messageitem_item">
        <slot name="handle"></slot>
      </div>
      <div class="messageitem_item">
        <slot name="message"></slot>
      </div>
      <div class="messageitem_item">
        <ItemImgHead :item="items"></ItemImgHead>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MessageItem",
  props: {
    items: {
      type: Object,
      default() {
        return { userHead: "", nickName: "undefined" };
      },
    },
    messageType: {
      type: Number,
      default() {
        return 1;
      },
    },
  },
  components: {
    ItemImgHead: () =>
      import(
        /* webpackChunkName: "itemImgHead" */ "../../components/common/itemImgHead"
      ),
  },
  data() {
    return {};
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.messageitem {
  padding: 5 / @base 0;
  .messageitem_content {
    display: flex;
    &.on {
      .messageitem_item {
        margin: 0 0 0 5 / @base;
        &:last-child {
          margin: 0 0 0 5 / @base;
        }
      }
    }
  }
  .messageitem_item {
    width: 70%;
    margin: 0 5 / @base 0 0;
    text-align: center;
    &:first-child {
      width: 15%;
    }
    &:last-child {
      width: 15%;
    }
  }
}
</style>
